<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>智慧社区管理系统</title>
	<link rel="stylesheet" href="assets/css/login.css">
	<!--  导入Vue依赖-->
	<script src="assets/vue.min-v2.5.16.js"></script>
	<script src="assets/axios.min.js"></script>
</head>

<body>
	<div class="box" id="app">
		<div style="position: absolute;inset: 2px;background: #28292d;padding: 50px 40px;border-radius: 8px;z-index: 2;display: flex;flex-direction: column;">
<!--			<form autocomplete="off">-->
				<h2>用户登录</h2>
				<div class="inputBox">
					<input type="text" required="required" v-model="userName">
					<span>UserName</span>
					<i></i>
				</div>
				<div class="inputBox">
					<input type="password" required="required" v-model="passwd">
					<span>Password</span>
					<i></i>
				</div>
				<div class="links">
					<a href="#">忘记密码</a>
					<a @click="doSignIn()">注册</a>
				</div>
				<input type="submit" value="登录" @click="doLogin()">
<!--			</form>-->
		</div>
	</div>
</body>
<script>
	//创建vue对象
	new Vue({
		el:'#app',
		data:{//需要绑定的数据
			user:null,//登陆的用户数据
			userName:null,//用户名
			passwd:null,//密码
		},
		methods:{//所有的方法
			doLogin(){//点击登陆按钮后执行
				//通过axios发送请求到UserLoginServlet
				var url = 'http://localhost:8080/user/login';
				axios.post(url,{
					username: this.userName,
					password: this.passwd
				}).then(response =>{
					if(response.data.data !=null){
						this.user= response.data.data;
						localStorage.setItem("uid",response.data.data.id);
						window.location.href='main.html';
					}else{//登陆失败
						alert("用户名或密码错误");
						this.doRest();
					}
				});
			},
			doRest(){
				this.userName=null;
				this.passwd=null;
			},
			doSignIn(){
				window.location.href='register.html';
			}
		},
		created:function (){//页面加载完成后执行
		}
	});

</script>

</html>